<template>
  <view>
    <view class="search-top">
      <uni-search-bar @input="input" :focus="true" :cancelButton="none" :radius="20"></uni-search-bar>
    </view>
    <view class="search-content" v-if="showSearchList">
      <view class="search-list">
        <view class="search-item" v-for="(item,i) in searchList" :key="i" @click="gotoGoodsDetail(item)">
          <text class="search-item-text">{{item.goods_name}}</text>
          <uni-icons type="forward" size="15"></uni-icons>
        </view>
      </view>
    </view>
    <view class="search-bottom" v-else>
      <view class="search-bottom-top">
        <text class="search-bottom-top-text">搜索历史</text>
        <uni-icons type="trash-filled" size="20" @click="removeAllHistoryList"></uni-icons>
      </view>
      <view class="search-bottom-bottom">
        <uni-tag :text="item" v-for="(item,i) in searchHistoryLists" :key="i" @click="fastSearch(item)" :circle="true">
        </uni-tag>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        timer: null,
        searchList: [],
        showSearchList: false,
        searchHistoryList: []
      };
    },
    computed: {
      searchHistoryLists: function() {
        return [...this.searchHistoryList].reverse()
      }
    },
    onLoad() {
      this.searchHistoryList = wx.getStorageSync('searchHistoryList') || []
    },
    methods: {
      fastSearch(item) {
        uni.navigateTo({
          url: '/subpkg_goods/goods_list/goods_list?query=' + item
        })
      },
      removeAllHistoryList() {
        this.searchHistoryList = []
        wx.setStorageSync('searchHistoryList', [])
      },
      gotoGoodsDetail(item) {
        uni.navigateTo({
          url: '/subpkg_goods/goods_detail/goods_detail?goods_id=' + item.goods_id
        })
      },
      async search(content) {
        await uni.$http.get('/api/public/v1/goods/qsearch', {
          query: content
        }).then(res => {
          if (res.data.meta.status !== 200) {
            return uni.$showMsg()
          }
          this.searchList = res.data.message
        })
      },
      pushHistoryList(searchContent) {
        let historyList = new Set(this.searchHistoryList)
        historyList.delete(searchContent)
        historyList.add(searchContent)
        this.searchHistoryList = Array.from(historyList)
      },
      input(e) {

        clearTimeout(this.timer)

        this.timer = setTimeout(() => {
          if (e) {
            this.showSearchList = true
            this.search(e)
            this.pushHistoryList(e)
            wx.setStorageSync('searchHistoryList', this.searchHistoryList)
          } else {
            this.showSearchList = false
          }
        }, 500)

      }
    }
  }
</script>

<style lang="scss" scoped>
  .search-list {
    padding: 0 5px;

    .search-item {

      font-size: 12px;
      padding: 13px 0;
      border-bottom: 1px solid #efefef;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .search-item-text {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        margin-right: 3px;
      }
    }
  }


  .search-bottom-top {
    display: flex;
    justify-content: space-between;
    padding: 0 5px;
    border-bottom: 1px solid #efefef;
    height: 30px;
    align-items: center;

    .search-bottom-top-text {
      font-size: 15px;
    }
  }

  .search-bottom-bottom {
    display: flex;
    flex-wrap: wrap;

    uni-tag {
      margin-left: 10px;
      margin-top: 10px;
    }
  }
</style>
